<template>
  <view class="recharge-reward-layout">
    <my-header background-color="transparent">
    </my-header>
    <view class="content">
      <view class="balance_box">
        <view class="list">
          <view class="list_item" v-for="item in rechargeData.data" :key="item.id">
            <view class="list-item-left">
              <view class="list-item-info">
                <view class="list-item-total">累计充值{{ item.stand_num }}元</view>
                <view class="list-item-num">*{{ item.num }}</view>
              </view>
            </view>

            <view class="list-item-right">
              <view class="list-item-current">
                <text class="current">{{ rechargeData.total_recharge }}</text>
                <text class="total">/{{ item.stand_num }}</text>
              </view>
              <view @click="onClick(item)" class="list-item-right-btn btn-primary"
                    :style="{filter: item.status === 2 ? 'grayscale(1)' : ''}">{{ btnStr(item.status) }}
              </view>
            </view>
            
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      rechargeData: {
        data: [],
        total_recharge: 0,
      },
    }
  },
  onLoad() {
    this.getRechargeRewards()
  },
  onShow() {

  },
  computed: {
    btnStr() {
      return (status) => {
        switch (status) {
          case 0:
            return '前往'
          case 1:
            return '可领取'
          case 2:
            return '已领取'
        }
      }
    },
  },
  methods: {
    onClick(item) {
      if (item.status === 0) {
        this.header(`/pages/user/recharge`)
      } else if (item.status === 1) {
        this.submit(item.id)
      }
    },
    back() {
      uni.navigateBack()
    },
    getRechargeRewards() {
      uni.showLoading({
        title: '数据加载中',
      })
      api.rechargeRewards.index().then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          this.rechargeData.data = res.data.data
          this.rechargeData.total_recharge = res.data.total_recharge
        }
      }).catch(error => {
        console.log(error)
      })
    },
    submit(id) {
      uni.showLoading({
        title: '领取中',
      })
      api.rechargeRewards.reward({ id: id }).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          this.show('领取成功')
          this.getRechargeRewards()
        }
      }).catch(error => {
        console.log(error)
      })
    },


  },
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  width: 100%;
  background: url("https://www.dingxians.cn/upload/images/user/ic-recharge-reward.png") 100%/100%;

  .balance_box {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 468rpx);
    position: fixed;
    top: 468rpx;
    left: 20rpx;

    .list {
      display: flex;
      flex-direction: column;
      overflow: scroll;

      .list_item {
        display: flex;
        margin: 10rpx auto;
        width: 710rpx;
        height: 220rpx;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 20rpx;
        background-image: url("https://www.dingxians.cn/upload/images/user/bg-recharge-reward-item.png");
        background-size: 100% 100%;
        color: white;

        .list-item-left {
          display: flex;

          .list-item-img-bg {
            width: 112rpx;
            height: 112rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url("https://www.dingxians.cn/upload/images/box/bg-goods-image-legend.png");
            background-size: 100% 100%;

            .list-item-img {
              width: 94rpx;
              height: 94rpx;
            }
          }

          .list-item-info {
            margin-left: 170rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .list-item-total {
              font-size: 32rpx;
            }

            .list-item-num {
              margin-top: 16rpx;
              font-size: 50rpx;
              color: #45F5FF;
            }
          }
        }

        .list-item-right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: flex-end;

          .list-item-current {
            background: #000E2F;
            border-radius: 15rpx;
            padding: 4rpx 10rpx;
            font-size: 24rpx;
          }

          .list-item-right-btn {
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            font-weight: bold;
            width: 170rpx;
            font-size: 26rpx;
          }
        }

        /*.list_item_top {
          display: flex;
          justify-content: space-between;
          .rate {
            .total_recharge {
              color:red;
            }
          }
        }
        .list_item_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .list_item_left {
            display: flex;
            align-items: baseline;
            .list_item_icon {
              width: 105rpx;
              margin-right: 10rpx;
            }
            .num {
              font-weight: bold;
            }
          }
          .list_item_right {
            width: 175rpx;
          }
        }
        */
      }
    }

  }
}
</style>